<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :inline="true" :model="queryParams" label-width="90px">
			<el-form-item label="订单编号:" prop="orderSn">
				<el-input v-model.trim="queryParams.orderSn" clearable placeholder="请输入订单编号" maxlength="18" show-word-limit />
			</el-form-item>
			<el-form-item label="用户ID:" prop="userId">
				<el-input v-model.trim="queryParams.userId" clearable placeholder="请输入用户ID" maxlength="6" show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model.trim="queryParams.mobile" clearable maxlength="11" placeholder="请输入手机号码" show-word-limit />
			</el-form-item>
			<el-form-item label="商品ID:" prop="goodsId">
				<el-input v-model.trim="queryParams.goodsId" clearable placeholder="请输入商品ID" />
			</el-form-item>
			<el-form-item label="商品名称:" prop="goodsName">
				<el-input v-model.trim="queryParams.goodsName" clearable placeholder="请输入商品名称" />
			</el-form-item>
			<el-form-item label="供应商名称:" prop="supplierName">
				<el-input v-model.trim="queryParams.supplierName" clearable placeholder="请输入供应商名称" />
			</el-form-item>
			<el-form-item label="订单状态:" prop="orderStatus">
				<el-select v-model="queryParams.orderStatus" clearable placeholder="请选择订单状态">
					<el-option v-for="item in orderStatusOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="退款类型:" prop="type">
				<el-select v-model="queryParams.type" clearable placeholder="请选择退款类型">
					<el-option v-for="item in orderOptions2" :key="item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="售后状态:" prop="afterSaleStatus">
				<el-select v-model="queryParams.afterSaleStatus" clearable placeholder="请选择售后状态">
					<el-option v-for="item in orderOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="申请时间:"></start-end-time>
		</el-form>
		<div slot="card" class="mb-[24px] flex items-center">
			<l-statistical-card left-name="售后总金额" :left-value="statistics.refundCount" :right-value="statistics.todayRefundCount" />
			<l-statistical-card left-name="待审核金额" :left-value="statistics.waitAuditCount" :right-value="statistics.todayWaitAuditCount" />
			<l-statistical-card left-name="退货中金额" :left-value="statistics.arbitrationCount" :right-value="statistics.todayArbitrationCount" />
			<l-statistical-card left-name="已完成金额" :left-value="statistics.overCount" :right-value="statistics.todayOverCount" />
			<l-statistical-card left-name="已拒绝金额" :left-value="statistics.refuseCount" :right-value="statistics.todayRefuseCount" />
		</div>
		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />

			<el-button type="primary" @click="addShipAddress">
				<svg-icon icon-class="tuihuo" size="16px"></svg-icon>
				退货地址</el-button
			>
			<el-button v-hasPermi="['mall:order:export']" type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>
		<el-table v-loading="loading" :data="orderList" stripe @selection-change="handleSelectionChange">
			<el-table-column :formatter="emptyToString" align="center" label="序号" prop="id" type="index" width="50"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="订单编号" min-width="160" prop="orderSn" />
			<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="userId" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="手机号码" min-width="120" prop="mobile" />
			<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goodsId" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="goods_name" show-overflow-tooltip width="150">
				<template slot-scope="scope">
					<div class="goods-name-style">
						{{ scope.row.goodsName }}
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
				<template slot-scope="scope">
					<el-image :preview-src-list="[scope.row.picUrl]" :src="scope.row.picUrl" style="width: 48px; height: 48px"></el-image>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="供应商名称" prop="supplierName" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="商品规格" prop="goodsNorms" min-width="120" />
			<el-table-column :formatter="emptyToNumber" align="center" label="退款金额" prop="amount" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="订单状态" prop="statusUser" min-width="120">
				<template slot-scope="scope">
					<div v-if="scope.row.statusUser == 103">待发货</div>
					<div v-if="scope.row.statusUser == 106">待收货</div>
					<div v-if="scope.row.statusUser == 107">已完成</div>
					<div v-if="scope.row.statusUser == 108">售后完成</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="退款类型" prop="type" min-width="120">
				<template slot-scope="scope">
					<!--            <div v-if="scope.row.type==0">未收货退款</div>-->
					<div v-if="scope.row.type === 1 || scope.row.type === 0">退款</div>
					<div v-if="scope.row.type === 2">退货退款</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="退款原因" prop="reason" min-width="120" show-overflow-tooltip> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="退款图片" min-width="120">
				<template slot-scope="scope">
					<div v-if="scope.row.pictures && scope.row.pictures.indexOf('http') != -1" class="flex items-center justify-center">
						<el-image v-for="(item, index) in scope.row.pictures.split(',')" :key="index" :preview-src-list="[item]" :src="item" style="width: 48px; height: 48px"></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="售后状态" min-width="156">
				<template slot-scope="scope">
					<div class="w-full justify-center flex-col items-center">
						<div v-if="scope.row.status === 1">待审核</div>
						<div v-if="scope.row.status === 2">退款退货待上传物流</div>
						<div v-if="scope.row.status === 3">退款成功</div>
						<div v-if="scope.row.status === 4">已拒绝</div>
						<div v-if="scope.row.status === 5">用户已取消</div>
						<div v-if="scope.row.status === 8">退款退货中</div>

						<LCountDown
							v-if="scope.row.status === 1 || scope.row.status === 2 || scope.row.status === 8"
							color="#F14A46"
							:start-time="dayjs().valueOf()"
							:end-time="dayjs(scope.row.endTime).valueOf()"
							:day-txt="'天'"
							:hour-txt="'时'"
							:minutes-txt="'分'"
							:seconds-txt="'秒'"
						>
						</LCountDown>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="申请时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" :width="183" align="center" fixed="right" header-align="center" label="操作">
				<template slot-scope="scope">
					<div class="table-action flex justify-end items-center">
						<el-button v-if="scope.row.status === 1 && scope.row.type === 2" v-hasPermi="['mall:order:edit']" type="primary" @click="showDetails(scope.row.orderId, '2', scope.row.orderGoodsId)"
							>退款退货
						</el-button>
						<el-button v-if="scope.row.status === 1 && scope.row.type !== 2" v-hasPermi="['mall:order:edit']" type="primary" @click="showDetails(scope.row.orderId, '3', scope.row.orderGoodsId)"
							>审核
						</el-button>
						<el-button v-if="scope.row.status === 8 && scope.row.type === 2" v-hasPermi="['mall:order:edit']" type="primary" @click="showDetails(scope.row.orderId, '4', scope.row.orderGoodsId)"
							>确认完成
						</el-button>
						<el-button v-hasPermi="['mall:order:list']" type="primary" @click="showDetails(scope.row.orderId, '1', scope.row.orderGoodsId)">详情 </el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<l-dialog v-model="openDetails" :show-button="false" :title="title" width="1344px" @close="handleClose">
			<div class="h-[137px] bg-[#F7F7F7] py-[23px] mb-[20px] flex items-center justify-center steps">
				<el-steps v-if="orderDetails.orderDetail.afterSaleStatus === 1 || orderDetails.orderDetail.afterSaleStatus === 5" :active="1" align-center class="flex-1">
					<el-step title="买家申请退款"></el-step>
					<el-step title="客服审核"></el-step>
					<el-step title="买家退货"></el-step>
					<el-step title="售后完成"></el-step>
				</el-steps>
				<el-steps v-if="orderDetails.orderDetail.afterSaleStatus === 2" :active="2" align-center class="flex-1">
					<el-step title="买家申请退款"></el-step>
					<el-step title="客服审核"></el-step>
					<el-step title="买家退货"></el-step>
					<el-step title="售后完成"></el-step>
				</el-steps>
				<el-steps v-if="orderDetails.orderDetail.afterSaleStatus === 8" :active="3" align-center class="flex-1">
					<el-step title="买家申请退款"></el-step>
					<el-step title="客服审核"></el-step>
					<el-step title="买家退货"></el-step>
					<el-step title="售后完成"></el-step>
				</el-steps>
				<el-steps v-if="orderDetails.orderDetail.afterSaleStatus === 3 || orderDetails.orderDetail.afterSaleStatus === 4" :active="4" align-center class="flex-1">
					<el-step title="买家申请退款"></el-step>
					<el-step title="客服审核"></el-step>
					<el-step title="买家退货"></el-step>
					<el-step title="售后完成"></el-step>
				</el-steps>
			</div>

			<div class="border-das pl-[26px] py-[23px] mb-[14px]">
				<template v-if="orderDetails.orderDetail.afterSaleStatus === 1">
					<div>买家申请退款退货，请尽快处理</div>
					<div class="text-[#F14A46] flex w-full items-center">
						<el-statistic
							format="HH时mm分ss秒未处理，将会自动同意买家申请"
							:value-style="{ fontSize: '14px', color: '#F14A46' }"
							class="statistic"
							:value="dayjs().valueOf() + dayjs(orderDetails.aftersaleInfo.endTime).valueOf() - dayjs().valueOf()"
							time-indices
						>
							<div slot="prefix" class="text-[#F14A46]">如未在</div>
						</el-statistic>
					</div>
				</template>
				<template v-if="orderDetails.orderDetail.afterSaleStatus === 2">
					<div>退款退货待上传物流</div>
					<div class="text-[#F14A46] flex w-full items-center">
						<el-statistic
							format="HH时mm分ss秒未上传物流，售后将自动关闭"
							:value-style="{ fontSize: '14px', color: '#F14A46' }"
							class="statistic"
							:value="dayjs().valueOf() + dayjs(orderDetails.aftersaleInfo.endTime).valueOf() - +dayjs().valueOf()"
							time-indices
						>
							<div slot="prefix" class="text-[#F14A46]">如未在</div>
						</el-statistic>
					</div>
				</template>
				<template v-if="orderDetails.orderDetail.afterSaleStatus === 8">
					<div>退款退货中</div>
					<div class="text-[#F14A46] flex w-full items-center">
						<el-statistic
							format="HH时mm分ss秒未审核，将自动退款成功"
							:value-style="{ fontSize: '14px', color: '#F14A46' }"
							class="statistic"
							:value="dayjs().valueOf() + dayjs(orderDetails.aftersaleInfo.endTime).valueOf() - +dayjs().valueOf()"
							time-indices
						>
							<div slot="prefix" class="text-[#F14A46]">如未在</div>
						</el-statistic>
					</div>
				</template>
				<template v-if="orderDetails.orderDetail.afterSaleStatus === 3">
					<div class="text-[#F14A46]">订单状态：已完成</div>
				</template>
				<template v-if="orderDetails.orderDetail.afterSaleStatus === 4">
					<div class="text-[#F14A46]">订单状态：已拒绝</div>
				</template>
				<template v-if="orderDetails.orderDetail.afterSaleStatus === 5">
					<div class="text-[#F14A46]">订单状态：已关闭</div>
				</template>
			</div>
			<div class="content">
				<div class="title font-bold mb-[13px]">售后信息</div>
				<el-table stripe :data="[orderDetails.aftersaleInfo]">
					<el-table-column prop="uuid" :formatter="emptyToString" label="用户ID" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="userPhone" :formatter="emptyToString" label="手机号码" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="generateTime" :formatter="emptyToString" label="售后类型" min-width="120" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							{{ scope.row.type === 0 ? '退款' : scope.row.type === 2 ? '退款退货' : '-' }}
						</template>
					</el-table-column>
					<el-table-column prop="refundAmount" :formatter="emptyToString" label="退款金额（元）" min-width="156" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="describe" :formatter="emptyToString" label="退款原因" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="afterSaleStatus" :formatter="emptyToString" label="退款图片" min-width="120" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							<el-image
								v-for="(item, index) in scope.row.images"
								v-if="scope.row.images != null && scope.row.images > 0"
								:key="index"
								:preview-src-list="[item]"
								class="!mr-[10px]"
								:src="item"
								style="width: 48px; height: 48px"
							></el-image>
							<span v-else="-"></span>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" :formatter="emptyToString" label="申请时间" min-width="156" show-overflow-tooltip align="center"></el-table-column>
				</el-table>
			</div>

			<div class="content">
				<div class="title font-bold mb-[13px]">订单信息</div>
				<el-table stripe :data="[orderDetails.orderDetail]">
					<el-table-column prop="orderSn" :formatter="emptyToString" label="订单编号" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="payType" :formatter="emptyToString" label="支付方式" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="orderStatus" :formatter="emptyToString" label="订单状态" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="generateTime" :formatter="emptyToString" label="下单时间" min-width="156" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="afterSaleStatus" :formatter="emptyToString" label="售后状态" min-width="120" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.afterSaleStatus === 0">无售后</span>
							<span v-else-if="scope.row.afterSaleStatus === 1">已申请</span>
							<span v-else-if="scope.row.afterSaleStatus === 2">待买家处理</span>
							<span v-else-if="scope.row.afterSaleStatus === 3">退款成功</span>
							<span v-else-if="scope.row.afterSaleStatus === 4">审核拒绝</span>
							<span v-else-if="scope.row.afterSaleStatus === 5">用户已取消</span>
							<span v-else-if="scope.row.afterSaleStatus === 8">退款退货中</span>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column prop="remark" :formatter="emptyToString" label="备注" min-width="120" show-overflow-tooltip align="center"></el-table-column>
				</el-table>
			</div>
			<div class="content">
				<div class="title font-bold mb-[13px]">商品信息</div>
				<el-table stripe :data="orderDetails.goodsInfo">
					<el-table-column prop="goodsId" :formatter="emptyToString" label="商品ID" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="goods_name" show-overflow-tooltip width="150">
						<template slot-scope="scope">
							<div class="goods-name-style" style="color: var(--primary-color)">
								{{ scope.row.goodsName }}
							</div>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
						<template slot-scope="scope">
							<el-image :preview-src-list="[scope.row.picUrl]" :src="scope.row.picUrl" style="width: 48px; height: 48px"></el-image>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品类型" prop="orderType" min-width="120" />
					<el-table-column :formatter="emptyToString" align="center" label="供应商名称" prop="supplierName" min-width="120" />
					<el-table-column :formatter="emptyToString" align="center" label="商品规格" prop="attribute" min-width="120" />
					<el-table-column :formatter="emptyToNumber" align="center" label="数量" prop="goodsNum" min-width="120" />
					<el-table-column :formatter="emptyToNumber" align="center" label="货款（元）" prop="supplyPrice" min-width="120" />
					<el-table-column :formatter="emptyToNumber" align="center" label="优惠金额（元）" prop="couponPrice" min-width="120" />
					<el-table-column :formatter="emptyToNumber" align="center" label="折扣金额（元）" prop="memberPrice" min-width="120" />
					<el-table-column :formatter="emptyToNumber" align="center" label="实付金额（元）" prop="actualPrice" min-width="120" />
					<el-table-column :formatter="emptyToNumber" align="center" label="支付积分" prop="deductPrice" min-width="120" />
				</el-table>
			</div>

			<div
				v-if="
					(orderDetails.orderDetail.afterSaleStatus === 8 || orderDetails.orderDetail.afterSaleStatus === 3 || orderDetails.orderDetail.afterSaleStatus === 4) &&
					orderDetails.logisticsInfo &&
					orderDetails.logisticsInfo.result
				"
				class="material"
			>
				<div class="material-title">物流信息</div>
				<div v-if="orderDetails.logisticsInfo" class="material-info">
					<span>快递公司：{{ orderDetails.logisticsInfo.result.expName }}</span>
					<span>物流编号：{{ orderDetails.logisticsInfo.result.number }}</span>
				</div>
				<div v-if="orderDetails.logisticsInfo" class="material-timeline">
					<el-timeline>
						<el-timeline-item v-for="(item, index) in orderDetails.logisticsInfo.result.list" :key="index" placement="top">
							<el-card shadow="never" :body-style="{ padding: '15px 10px' }">
								<h4>{{ item.status }}</h4>
								<div class="time">{{ item.time }}</div>
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</div>
			</div>
			<div v-if="type == 4" style="display: flex; justify-content: center">
				<el-button style="width: 236px; height: 60px; border-radius: 4px" @click="openDetails = false">取消 </el-button>
				<el-button style="width: 236px; height: 60px; border-radius: 4px" type="primary" @click="audit(3)"> 确认收货 </el-button>
				<!--        <el-button style="width:245px;height:60px;border-radius: 4px;marginTop:35px" type="primary" @click="take">确认收货</el-button>-->
			</div>
			<div v-if="type == 2 || type == 3" style="display: flex; justify-content: center">
				<el-button v-if="type == 2" style="width: 236px; height: 60px; border-radius: 4px" type="primary" @click="auditV2(2)">同意 </el-button>
				<el-button v-if="type == 3" style="width: 236px; height: 60px; border-radius: 4px" type="primary" @click="audit(3)">同意 </el-button>
				<el-button style="width: 236px; height: 60px; border-radius: 4px" class="!ml-[20px]" @click="refuse(4)">拒绝 </el-button>
				<!--        <el-button style="width:245px;height:60px;border-radius: 4px;marginTop:35px" type="primary" @click="take">确认收货</el-button>-->
			</div>
		</l-dialog>
		<l-dialog v-model="open" :loading.sync="formLoading" :title="title" width="567px" @close="cancel" @formClose="cancel" @formSubmit="submitFrom2">
			<el-form ref="form" :model="form" :rules="rules" label-width="130px">
				<el-form-item label="收件人名称:" prop="name">
					<el-input v-model.trim="form.name" class="!w-full !max-w-full" maxlength="11" placeholder="请输入收件人名称" />
				</el-form-item>
				<el-form-item label="收件人手机号码:" prop="name">
					<el-input v-model.trim="form.tel" class="!w-full !max-w-full" maxlength="11" placeholder="请输入收件人手机号码" />
				</el-form-item>
				<el-form-item label="退货地址:" prop="location">
					<el-cascader v-model="form.location" class="el-input-full" value="label" :props="props" placeholder="请选择退货地址"></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址:" prop="addressDetail">
					<el-input v-model="form.addressDetail" class="!w-full !max-w-full" placeholder="请输入详细地址" style="width: 500px" />
				</el-form-item>
			</el-form>
		</l-dialog>
	</l-page>
</template>

<script>
import {
	addShipAddress,
	aftersaleList,
	auditAftersale,
	auditAftersaleV2,
	auditShipAddress,
	delOrder,
	exportAftersale,
	getOrderDetails,
	getShipAddress,
	goShip,
	refuseAftersale,
} from '@/api/mall/order';
import Editor from '@/components/Editor';
import tableMixins from '@/mixins/table';
import { getArea, getCity } from '@/api/mall/partner';
import TemplateZone from '@/views/mall/logistics/templateZone';

export default {
	name: 'Aftersale',
	components: {
		TemplateZone,
		Editor,
	},
	mixins: [tableMixins],
	data() {
		return {
			props: {
				lazy: true,
				lazyLoad(node, resolve) {
					const { level, value } = node;
					console.log(node);
					if (level === 0) {
						getArea().then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.objId,
								label: item.name,
								leaf: false,
							}));
							resolve(nodes);
						});
					} else if (level === 1) {
						let obj = { id: value };
						getCity(obj).then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.objId,
								label: item.name,
								leaf: false,
							}));
							resolve(nodes);
						});
					} else {
						let obj = { id: value };
						getCity(obj).then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.objId,
								label: item.name,
								leaf: true,
							}));
							resolve(nodes);
						});
					}
				},
			},
			formLoading: false,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 订单表格数据
			orderList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			openDetails: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				userId: null,
				orderSn: null,
				goodsId: null,
				goodsName: null,
				orderStatus: null,
				supplierName: null,
				afterSaleStatus: null,
				consignee: null,
				mobile: null,
				address: null,
				message: null,
				goodsPrice: null,
				freightPrice: null,
				couponPrice: null,
				integralPrice: null,
				grouponPrice: null,
				orderPrice: null,
				actualPrice: null,
				payId: null,
				payTime: null,
				shipSn: null,
				shipChannel: null,
				shipTime: null,
				refundAmount: null,
				refundType: null,
				refundContent: null,
				refundTime: null,
				confirmTime: null,
				comments: null,
				endTime: null,
				productName: null,
				paymentStatus: null,
				creationTime: null,
				status: null,
				type: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				shipSn: [{ required: true, message: '快递编号不能为空', trigger: 'blur' }],
				shipChannel: [{ required: true, message: '快递公司不能为空', trigger: 'blur' }],
			},
			orderData: {},
			orderOptions: [
				{ label: '全部', value: null },
				{ label: '无售后', value: 0 },
				{ label: '已申请', value: 1 },
				{ label: '待买家处理', value: 2 },
				{ label: '退款成功', value: 3 },
				{ label: '审核拒绝', value: 4 },
				{ label: '用户已取消', value: 5 },
				{ label: '退款退货中', value: 8 },
			],
			orderOptions2: [
				{ label: '全部', value: null },
				{ label: '退款', value: 0 },
				{ label: '退款退货', value: 2 },
				// {label:"未收货退款",value:"0"},
			],
			orderStatusOptions: [
				{ label: '全部', value: null },
				{ label: '待收货', value: '103' },
				{ label: '待发货', value: '106' },
			],
			payOptions: [],
			logisticsInfo: {},
			orderDetails: {
				aftersaleInfo: {},
				goodsInfo: {},
				logisticsInfo: {},
				orderDetail: {},
				userInfo: {},
			},
			aftersaleInfo: {},
			type: '',
			statistics: {
				arbitrationCount: 0,
				overCount: 0,
				refundCount: 0,
				refuseCount: 0,
				todayArbitrationCount: 0,
				todayOverCount: 0,
				todayRefundCount: 0,
				todayRefuseCount: 0,
				todayWaitAuditCount: 0,
				waitAuditCount: 0,
			},
		};
	},
	created() {
		this.getList();
		this.getStatistics();
	},
	methods: {
		getStatistics() {
			this.$request.post('/mall/aftersale/refund-count').then((res) => {
				this.statistics = res.data;
			});
		},
		getTime(startTime, endTime) {
			this.queryParams.startTime = startTime;
			this.queryParams.endTime = endTime;
		},
		auditV2(type) {
			auditAftersaleV2({
				orderId: this.orderId,
				orderGoodsId: this.orderGoodsId,
				status: type,
			}).then(() => {
				this.$message.success('操作成功!');
				this.getList();
				this.openDetails = false;
			});
		},
		refuse(type) {
			refuseAftersale({
				orderId: this.orderId,
				orderGoodsId: this.orderGoodsId,
				status: type,
			}).then(() => {
				this.$message.success('操作成功!');
				this.getList();
				this.openDetails = false;
			});
		},
		audit(type) {
			auditAftersale({
				orderId: this.orderId,
				orderGoodsId: this.orderGoodsId,
				status: type,
			}).then(() => {
				this.$message.success('操作成功!');
				this.getList();
				this.openDetails = false;
			});
		},
		// 编辑退货地址
		addShipAddress() {
			getShipAddress().then((res) => {
				if (res.data != null) {
					this.form = res.data;
					this.form.location = [parseInt(res.data.province), parseInt(res.data.city), parseInt(res.data.county)];
				}
				this.title = '退货地址';
				this.open = true;
			});
		},
		// 提交退货地址
		submitFrom2() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					let obj = {
						name: this.form.name,
						province: this.form.location[0],
						city: this.form.location[1],
						county: this.form.location[2],
						addressDetail: this.form.addressDetail,
						tel: this.form.tel,
					};
					if (this.form.id != null) {
						obj.id = this.form.id;
						auditShipAddress(obj)
							.then((response) => {
								this.msgSuccess('修改成功');
								this.open = false;
								this.getList();
							})
							.finally(() => {
								this.formLoading = false;
							});
					} else {
						addShipAddress(obj)
							.then((response) => {
								this.msgSuccess('新增成功');
								this.open = false;
								this.getList();
							})
							.finally(() => {
								this.formLoading = false;
							});
					}
				} else {
					setTimeout(() => {
						this.formLoading = false;
					}, 100);
				}
			});
		},
		submit() {},
		getList() {
			this.loading = true;
			aftersaleList(this.queryParams)
				.then((response) => {
					this.orderList = response.data.records;
					this.total = response.data.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleClose() {
			this.openDetails = false;
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			if (this.queryParams.date && this.queryParams.date.length > 0) {
				this.queryParams.beginTime = this.queryParams.date[0];
				this.queryParams.endTimes = this.queryParams.date[1];
			}
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.child.resetTime();
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加订单';
		},
		showDetails(id, type, orderGoodsId) {
			this.orderId = id;
			this.orderGoodsId = orderGoodsId;
			getOrderDetails(id, orderGoodsId).then((response) => {
				this.orderDetails = response.data;
				// if(response.data.logisticsInfo ){
				//   response.data.logisticsInfo.result.list =  response.data.logisticsInfo.result.list.reverse()
				// }
				if (response.data.logisticsInfo) {
					this.logisticsInfo = response.data.logisticsInfo.result;
				}
				this.aftersaleInfo = response.data.aftersaleInfo;
				this.type = type;
				console.log('type', type);
				switch (type) {
					case '1':
						//查看详情
						this.title = '订单详情';
						break;
					case '2':
						//退款
						this.title = '退款';
						break;
					case '3':
						//退款退货
						this.title = '审核';
						break;
					case '4':
						//确认收货
						this.title = '订单详情';
						break;
				}
				this.openDetails = true;
			});
		},
		/** 编辑按钮操作 */
		handleUpdate(id) {
			getOrderDetails(id).then((response) => {
				let data = response.data;
				this.form = {
					orderSn: data.orderDetail.orderSn,
					mobile: data.userInfo.consigneePhone,
					consignee: data.userInfo.consignee,
					address: data.userInfo.address,
					id: id,
				};
				this.open = true;
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					goShip({
						id: this.form.id,
						shipChannel: this.form.shipChannel,
						shipSn: this.form.shipSn,
					}).then((res) => {
						this.msgSuccess('发货成功!');
						this.open = false;
						this.getList();
					});
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除订单编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delOrder(ids);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有订单数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportAftersale(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.statistic {
	::v-deep {
		.con {
			justify-content: flex-start;
		}
	}
}

.steps {
	::v-deep {
		.el-step.is-horizontal .el-step__line {
			top: 22px;
			background-color: rgba(112, 112, 112, 0.2);
			height: 1px;
		}
		.el-step__icon {
			width: 46px;
			height: 46px;
			border: 1px solid;
		}
		.is-finish {
			.el-step__icon {
				background: var(--primary-color);
				color: #fff;
				font-size: 12px;
			}
		}
		.el-step__title.is-wait {
			border-color: #999999;
			color: #999999;
		}
		.is-process {
			border-color: #999999;
			color: #999999;
			font-weight: normal;
			.el-step__icon {
				font-size: 12px;
			}
		}
	}
}

.material {
	::v-deep {
		.el-timeline-item__node--normal {
			&:before {
				content: '';
				background: url('~@/assets/images/che.png') no-repeat;
				background-size: 100% 100% !important;
				width: 12px;
				height: 10px;
			}
		}
	}
	&-title {
		font-weight: bold;
		color: #333333;
		font-size: 14px;
		margin-bottom: 17px;
	}
	&-info {
		display: flex;
		align-items: center;
		margin-bottom: 11px;
		span {
			font-size: 12px;
			font-weight: 400;
			color: #333333;
			margin-right: 45px;
		}
	}
	&-timeline {
		padding-top: 20px;
		width: 400px;
		.el-card {
			border: none;
			background-color: #f5f5f5;
		}
		h4 {
			font-size: 12px;
		}
		.time {
			font-size: 12px;
			color: #76cebd;
			margin-top: 10px;
		}
	}
}
.truck {
	//width: 600px;
	max-height: 350px;
	overflow-y: auto;
	padding: 20px;
}

::v-deep .el-timeline-item__node--normal {
	width: 28px;
	height: 28px;
	left: -8px;
	background: #1d84c6;

	::v-deep.el-timeline-item__icon {
		font-size: 20px;
	}
}

.el-form--inline .el-form-item {
	margin-right: 40px;
}

.content {
	//border-bottom: 1px solid #E5E5E5;
	padding-bottom: 31px;
	color: #333333;
	//margin-bottom: 22px;
	/*margin-top: 20px;*/
	.title {
		font-weight: bold;
		font-size: 14px;
		text-align: left;
	}

	.content-info {
		display: flex;
		padding: 11px 16px;
		border: 1px dashed #cccccc;
		border-radius: 10px;
		margin-top: 16px;

		.info2 {
			padding-left: 23px;
			position: relative;
			//::after{
			//  content: "";
			//  position: absolute;
			//  left: 0;
			//  top: 20px;
			//  width: 1px;
			//  height: 30px;
			//  background:  #CCCCCC;;
			//  opacity: 1;
			//}
		}

		.info {
			width: 33.33%;

			> div {
				//margin-top: 10px;
				padding: 5px 0;
			}
		}
	}

	.content-info-sh {
		display: block;

		.img-box {
			display: flex;
			flex-wrap: wrap;
			padding-left: 40px;

			.image {
				width: 172px;
				height: 103px;
				border-radius: 8px;
				margin-left: 20px;
			}
		}

		.message {
			padding: 5px 0;

			span {
				padding-right: 40px;
			}
		}
	}
}
</style>
